<!DOCTYPE html>
<html>
<!--
Copyright The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.ui.TableSorter</title>
  <script src="../base.js"></script>
  <script>
    goog.require('goog.ui.TableSorter');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="../css/tablesorter.css">
  <style>
    /** Each application can choose how to show sorted state.
        This is a simple way, just toggling background colors. */

    th.goog-tablesorter-sorted {
      background-color: #eef;
    }

    th.goog-tablesorter-sorted-reverse {
      background-color: #fee;
    }
  </style>
</head>
<body>
  <h1>goog.ui.TableSorter</h1>
  <p>
    Number sorts numerically, month sorts alphabetically, and days sorts
    numerically in reverse.
  </p>
  <table border="0" cellpadding="3" id="sortMe">
    <thead>
      <tr>
        <th>Number</th>
        <th>Month</th>
        <th>Days (non-leap year)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>January</td>
        <td>31</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Februrary</td>
        <td>28</td>
      </tr>
      <tr>
        <td>3</td>
        <td>March</td>
        <td>31</td>
      </tr>
      <tr>
        <td>4</td>
        <td>April</td>
        <td>30</td>
      </tr>
      <tr>
        <td>5</td>
        <td>May</td>
        <td>31</td>
      </tr>
      <tr>
        <td>6</td>
        <td>June</td>
        <td>30</td>
      </tr>
      <tr>
        <td>7</td>
        <td>July</td>
        <td>31</td>
      </tr>
      <tr>
        <td>8</td>
        <td>August</td>
        <td>31</td>
      </tr>
      <tr>
        <td>9</td>
        <td>September</td>
        <td>30</td>
      </tr>
      <tr>
        <td>10</td>
        <td>October</td>
        <td>31</td>
      </tr>
      <tr>
        <td>11</td>
        <td>November</td>
        <td>30</td>
      </tr>
      <tr>
        <td>12</td>
        <td>December</td>
        <td>31</td>
      </tr>
    </tbody>
  </table>
  <br/>
  <script>
    var component = new goog.ui.TableSorter();
    component.decorate(goog.dom.getElement('sortMe'));
    component.setSortFunction(1, goog.ui.TableSorter.alphaSort);
    component.setSortFunction(2,
        goog.ui.TableSorter.createReverseSort(goog.ui.TableSorter.numericSort));
  </script>
</body>
</html>
